<template>
  <div class="pop-wrapper">
    <div class="close"
        @click="handleClose">
      <svg-icon icon-class="close"
                class-name="custom-class"
                class="home-icon" />
    </div>
    <div class="desc">{{ desc }}</div>
    <input v-model="content" type="text" autocomplete="off" @keyup.enter="handleSubmit" @blur="handleScrollToBottom">
    <div v-show="desc === withdraw" class="desc">请输入提现密码</div>
    <div  v-show="desc === withdraw" class="password-wrap">
      <input v-model="password" :type="type" autocomplete="off" @keyup.enter="handleSubmit" @blur="handleScrollToBottom">
      <svg-icon v-if="type === 'password'"
                  icon-class="eye-close"
                  class-name="custom-class"
                  class="password-icon"
                  @click="handleClosePass"/>
      <svg-icon v-else icon-class="eye"
                  class-name="custom-class"
                  style="margin-top: 3px"
                  class="password-icon"
                  @click="handleOpenPass"/>
    </div>
    <div class="button-wrap">
      <button @click="handleSubmit">{{ btnDesc }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    desc: {
      type: String,
      default: '请输入核销码'
    },
    btnDesc: {
      type: String,
      default: '完成'
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      content: '',
      password: '',
      withdraw: '请输入提现金额',
      type: 'password'
    }
  },
  watch: {
    show: {
      handler: function (status) {
        if (!status) {
          this.content = ''
          this.password = ''
          window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight))
        }
      }
    }
  },
  created () {
  },
  methods: {
    handleScrollToBottom () {
      this.$emit('scroll')
    },
    handleClose () {
      this.$emit('close')
    },
    handleSubmit () {
      const { content, password } = this
      const flag = this.validity()
      if (flag) {
        this.desc === this.withdraw ? this.$emit('submit', { content, password }) : this.$emit('submit', content)
      }
    },
    validity () {
      const { content, password, withdraw, desc } = this
      if (content.trim() === '') {
        this.$toast({
          message: '输入内容不能为空',
          duration: 1000
        })
        return false
      }
      if (desc === withdraw && password.trim() === '') {
        this.$toast({
          message: '提现密码不能为空',
          duration: 1000
        })
        return false
      }
      return true
    },
    handleClosePass () {
      this.type = 'text'
    },
    handleOpenPass () {
      this.type = 'password'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.pop-wrapper
  width 678px
  background $common_bgc
  position relative
  padding-top 54px
  padding-left 60px
  padding-right 60px
  padding-bottom 32px
  box-sizing border-box

  .close
    position absolute
    top 24px
    right 26px

    .home-icon
      width 28px
      height 28px

  .desc
    font-size $home_header_size
    color $home_font_color
    line-height 92px

  input
    padding-right 10px
    box-sizing border-box
    height 88px
    width 100%
    font-size $pop_input_size
    color $home_header_font_color
    margin-bottom 60px
    border none
    border-bottom 2px solid #E1E2E6
    box-sizing border-box
    font-weight 500
  .password-wrap
    display flex
    align-items center
    width 100%
    height 88px
    margin-bottom 60px
    border-bottom 2px solid #E1E2E6
    overflow hidden
    input
      width 100%
      margin-bottom 0
      height 100%
      border none
      padding-right 10px
      box-sizing border-box
    .password-icon
      width 50px
      height 50px

  .button-wrap
    padding-left 42px
    padding-right 42px
    box-sizing border-box

    button
      width 100%
      background-color $primary
      border none
      color $common_bgc
      font-size $home_header_size
      font-weight 500
      height 80px
      border-radius 40px
</style>
